<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>QQ注册验证</title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			body{
				background:url(img/body.png) repeat-x;
			}
			/*大容器*/
			.wrap{
				margin:0 auto;
				width:1300px;
			}
			/*头部分*/
			header{
				width:1300px;
				height:109px;
				background: url(img/bg_chs.png);
			}
			/*主要内容*/
			.content{
				margin:0 auto;
				width:954px;
				height:580px;
				border:1px solid #81ADD9;
				border-top:none;
				background:#F9FDFF;
				padding-top:1px;
				/*box-shadow: 1px 3px 1px 0;阴影效果*/
			}
			.content .box{
				margin:0 auto;
				width:700px;
			}
			.content .box h4{
				color:#A3A4A5;
				width:700px;
				border-bottom:1px solid #DADADA;
				padding:0px 10px;
				box-sizing: border-box;
				margin-top:50px;
				
			}
			.box h4:before{
				content: "";
				display: inline-block;
				clear: both;
				width:3px;
				height:25px;
				background:url(img/body.png);
				margin: 0 10px 5px 0;
				vertical-align: middle;
			}
			p{
				margin:10px;
			}
			label{
				display: inline-block;
				width:80px;
				text-align: right;
			}
			.box a{
				font-size: 13px;
				margin-left:10px;
				color:#6C6C6C;
				text-decoration: none;
			}
			.box input:valid{
				border:1px solid red;
				width:240px;
				height:30px;
			}
			.box input:invalid{
				border:1px solid #7CDE59;
				width:240px;
				height:30px;
				}
			.box form input[type="submit"]{
				width:145px;
				height:45px;
				color:#fff;
				background:#B6010E;
				font-size: 22px;
				border: none;
				margin:30px 80px;
			}
			.box p i{
				font-style: normal;
				color:red;
			}
			.box form input[type="text"]:invalid{
				border:1px solid red;
			}
		</style>
	</head>
	<body>
		<!--大容器-->
		<section class="wrap">
			<!--头部分-->
			<header>
				
			</header>
			<!--主要内容-->
			<section class="content">
				<div class="box">
					<h4>注册账号</h4>
					<form id="reg" method="post" action="https://www.daidu.com">
						<p><label><i>*</i>昵称：</label><input type="text" placeholder="英文、数字长度为6-10字符"  required="required" pattern="[a-zA-Z0-9]{6,10}"/></p>
						<p><label><i>*</i>密码：</label><input type="password" placeholder="长度为6-16字符" required="required" pattern="[a-zA-Z0-9]{6,16}"/></p>
						<p><label>手机号码：</label><input type="text"/ pattern="1[3,5,7,8,9]{1}[0-9]{9}"><a href="#">忘记密码时可用手机号找回密码</a></p>
						<p><label><i>*</i>邮箱：</label><input type="email" required="required" /></p>
						<p><label>年龄：</label><input type="number"value="12" step="1" max="100" min="16"/></p>
						<p><input type="submit" value="立即注册"/></p>
					</form>
				</div>
				
			</section>
		</section>
		<script>
//			获取节点
			var inps = document.getElementsByTagName("input");
//			console.log(inps);//检测节点是否被获取
			inps[1].onblur = function(){
//				alert("密码输入不正确");
//				if(inps.value == "" || inps.value.length <6 || inps.value.length>16){
//					alert("密码输入不正确");
//				}
			}
		</script>
	</body>
</html>
